<template>
  <div>
    <section class="video-header">
      <div class="video-info">
        <div class="video-info-title" title="video.title">
          {{ article.title }}
        </div>
        <div class="video-info-detail">
          <div class="video-info-time">
            <svg style="margin-right:8px" xmlns="http://www.w3.org/2000/svg" width="21" height="21"
                 viewBox="0 0 24 24">
              <path
                  d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm1 12v-6h-2v8h7v-2h-5z"/>
            </svg>
            <span>
                           {{ article.createTime }}
                        </span>
          </div>
          <!--          <div class="video-info-playcount">-->
          <!--            <svg style="margin-right:8px" xmlns="http://www.w3.org/2000/svg" width="21" height="21"-->
          <!--                 viewBox="0 0 24 24">-->
          <!--              <path-->
          <!--                  d="M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-3 17v-10l9 5.146-9 4.854z" />-->
          <!--            </svg>-->
          <!--            &lt;!&ndash;              <span> video.play </span>&ndash;&gt;-->
          <!--          </div>-->
        </div>
      </div>
      <div class="video-info-uper">
        <router-link :to="{path:'/showMine',query:{userId:userId}}" >
          <el-image fit="cover" draggable="false"
                    src="'" alt="">
            <template #error>
              <img style="width: 80px;height: 80px;object-fit: cover;border-radius: 50px;"
                   :src="article.imageUrl" alt="">
            </template>
          </el-image>
        </router-link>
        <a href="" target="_blank">
          <div class="video-info-uper-name">
            {{ article.name }}
          </div>
        </a>
      </div>
    </section>
    <section class="player-container">
      <div >
        <Editor
           class="articles"
            v-model="html"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="onCreated"
        />
      </div>
    </section>
    <section class="lower">
      <div class="lower-left" ref="lower_left">
        <div class="lower-left-options">
          <div style="display: flex;justify-content: flex-start;align-items: center;height: 70px;">
<!--            <div class="lower-left-options-li lower-left-options-like" @click="btnLike">-->
<!--              <svg :class="{ 'btn-active': isLiked }" xmlns="http://www.w3.org/2000/svg" width="32"-->
<!--                   height="32" viewBox="0 0 24 24">-->
<!--                <path-->
<!--                    d="M5 22h-5v-12h5v12zm17.615-8.412c-.857-.115-.578-.734.031-.922.521-.16 1.354-.5 1.354-1.51 0-.672-.5-1.562-2.271-1.49-1.228.05-3.666-.198-4.979-.885.906-3.656.688-8.781-1.688-8.781-1.594 0-1.896 1.807-2.375 3.469-1.221 4.242-3.312 6.017-5.687 6.885v10.878c4.382.701 6.345 2.768 10.505 2.768 3.198 0 4.852-1.735 4.852-2.666 0-.335-.272-.573-.96-.626-.811-.062-.734-.812.031-.953 1.268-.234 1.826-.914 1.826-1.543 0-.529-.396-1.022-1.098-1.181-.837-.189-.664-.757.031-.812 1.133-.09 1.688-.764 1.688-1.41 0-.565-.424-1.109-1.26-1.221z" />-->
<!--              </svg>-->
<!--              <span :class="{ 'btn-active': isLiked }"> 12 </span>-->
<!--            </div>-->
<!--            <div class="lower-left-options-li lower-left-options-collection" @click="btnCollection">-->
<!--              <svg :class="{ 'btn-active': isCollected }" xmlns="http://www.w3.org/2000/svg" width="32"-->
<!--                   height="32" viewBox="0 0 24 24">-->
<!--                <path-->
<!--                    d="M12 .587l3.668 7.568 8.332 1.151-6.064 5.828 1.48 8.279-7.416-3.967-7.417 3.967 1.481-8.279-6.064-5.828 8.332-1.151z" />-->
<!--              </svg>-->
<!--              <span :class="{ 'btn-active': isCollected }"> 23 </span>-->
<!--            </div>-->
          </div>
<!--          <div class="options-info">-->
<!--            <a href="" target="_blank">-->
<!--              <el-image fit="cover" draggable="false"-->
<!--                        src=""-->
<!--                        alt="">-->
<!--                <template #error>-->
<!--                  <img style="width: 100%;height: 100%;object-fit: cover;"-->
<!--                       src="https://kotokawa-akira-mywife.site/web/api/account/getProfile/000" alt="">-->
<!--                </template>-->
<!--              </el-image>-->
<!--            </a>-->
<!--            <a href="" target="_blank">-->
<!--              <div class="options-img-name"> uper.name </div>-->
<!--            </a>-->
<!--          </div>-->
        </div>
<!--        <div class="lower-left-summary">-->
<!--          <div style="padding:5px 0px 10px 0px;font-size: 16px;">简介</div>-->
<!--          <div class="lower-left-summary-text-container" ref="text_container">-->
<!--            <div class="lower-left-summary-text" ref="summary_text">-->
<!--               video.name-->
<!--            </div>-->
<!--          </div>-->
<!--          <span class="lower-left-summary-more" ref="summary_more" v-show="summary_show">-->
<!--                        展开-->
<!--                    </span>-->
<!--        </div>-->
<!--        <div class="lower-comments" v-if="reply_show">-->
<!--          <div style="text-align:left;font-size: 26px;color: #000;">评论</div>-->
<!--          <ul>-->
<!--            <li class="lower-comments-li" v-for="(item,index) in comments">-->
<!--              <div class="lower-comments-li-header">-->
<!--                <a href="" style="pointer-events: none">-->
<!--                  <div class="lower-comments-li-img-container">-->
<!--                    <el-image fit="cover" draggable="false"-->
<!--                              src=""-->
<!--                              alt="">-->
<!--                      <template #error>-->
<!--                        <img style="width: 100%;height: 100%;object-fit: cover;"-->
<!--                             :src="item.imageUrl"-->
<!--                             alt="">-->
<!--                      </template>-->
<!--                    </el-image>-->
<!--                  </div>-->
<!--                </a>-->
<!--                <a href="">-->
<!--                  <div class="lower-comments-li-header-name">-->
<!--                    {{ item.name }}-->
<!--                  </div>-->
<!--                </a>-->
<!--              </div>-->
<!--              <div class="lower-comments-li-text">-->
<!--                <div class="lower-comments-li-text-container">-->
<!--                  <div class="lower-comments-li-text-main">-->
<!--                    {{ item.content }}-->
<!--                  </div>-->
<!--                </div>-->
<!--                <div class="lower-comments-li-text-time">-->
<!--                  {{ item.time }}-->
<!--                </div>-->
<!--              </div>-->
<!--            </li>-->
<!--            <li style="margin:30px 0 10px 0;width: 100%;text-align: center;display: block;">没有更多评论了~</li>-->
<!--          </ul>-->
<!--        </div>-->
<!--        <div v-else>-->
<!--          <p style="margin:30px 0 10px 0;width: 100%;text-align: center;display: block;">没有更多评论了~</p>-->
<!--        </div>-->
      </div>
    </section>
<!--    <transition name="fade" appear>-->
<!--      <section class="lower-reply bottom_reply" v-show="isPublicReply">-->
<!--        <div style="display:flex;justify-content:space-between;align-items: flex-start;">-->
<!--          <div class="lower-reply-img-container">-->
<!--            <el-image fit="cover" draggable="false"-->
<!--                      src="" alt="">-->
<!--              <template #error>-->
<!--                <img src="https://kotokawa-akira-mywife.site/web/api/account/getProfile/000" alt="">-->
<!--              </template>-->
<!--            </el-image>-->
<!--          </div>-->
<!--          <div class="lower-reply-input">-->
<!--            <textarea autocomplete="false" rows="3" placeholder="发条评论吧~" v-model="replyVideo"></textarea>-->
<!--          </div>-->
<!--        </div>-->
<!--        <div class="lower-reply-submit" @click="replyForVideo">-->
<!--          发布-->
<!--        </div>-->
<!--      </section>-->
<!--    </transition>-->
  </div>
</template>

<script>
import {Editor, Toolbar} from "@wangeditor/editor-for-vue";

export default {
  components: {Editor, Toolbar},
  name: "ShowArticles",
  data() {
    return {
      editor: null,
      html: '<p>hello</p>',
      toolbarConfig: {},
      editorConfig: {placeholder: '请输入内容...'},
      mode: 'default', // or 'simple',
      id: this.$route.query.id,
      userId: this.$route.query.userId,
      article: {},
      isPublicReply:false,
      reply_show: false,
      isLiked: false,
      isCollected: false,
      replyVideo: '',
      comments:[]
    }
  },
  methods: {
    onCreated(editor) {
      this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
    },
    btnLike() {

    },
    btnCollection() {

    },
    getArticle() {
      this.$axios.get("articles/getById?id=" + this.id)
          .then(resp => {
            let res = resp.data;
            this.html = res.data.content;
            this.article = res.data;
            console.log(this.article)
          })
          .catch(error => {
            console.log(error)
          })
    },
    replyForVideo() {
      let comment = {};
      comment.sId = this.id;
      comment.uId = this.userId;
      comment.content = this.replyVideo;
      comment.sType = 2;
      this.$axios.post("comment/setComment", this.$qs.stringify(comment))
          .then(resp=>{
            alert("发布成功");
            this.replyVideo = ''
            this.getComments();
          })
          .catch(error=>{
            alert("发布失败")
            console.log(error)
          })
    },
    getComments(){
      this.$axios.get("comment/getComment?sId=" + this.id + "&sType=2")
          .then(resp=>{
            let res = resp.data;
            this.comments = res.data;
            if(this.comments.length !== 0){
              this.reply_show = true;
            }
            console.log(resp)
          })
          .catch(error=>{
            console.log(error)
          })
    }
  },
  created() {
    this.getArticle();
    this.getComments();
  },
  mounted() {
    // 模拟 ajax 请求，异步渲染编辑器
    setTimeout(() => {
      this.html = this.article.content
    }, 1500);
    window.addEventListener("scroll", () => {
      if (document.documentElement.scrollTop > 40) {
        this.isPublicReply = true;
      } else this.isPublicReply = false;
    });
  },
  beforeDestroy() {
    const editor = this.editor
    if (editor == null) return
    editor.destroy() // 组件销毁时，及时销毁编辑器
  }
}
</script>

<style scoped>
.video-header {
  margin: 0 auto;
  padding: 40px 0 30px 0;
  width: 80%;
  height: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.player-container {
  width: 100%;
  height: 80%;
  /*background-color: #888888;*/
}
.player-container {
  width: 100%;
}
.articles{

  overflow-y: hidden;
  aspect-ratio: 16/9;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 1px rgb(225 225 225 / 80%);
}
.dialog-collection-ul {
  max-height: 300px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.dialog-collection-li {
  font-size: 18px;
  margin: 5px 0 5px 0;
  padding: 5px;
  border-radius: 5px;
  user-select: none;
  cursor: pointer;
  transition: all .3s ease;
}

.dialog-collection-li:hover {
}

.backTop {
  position: fixed;
  width: 50px;
  height: 50px;
  right: 30px;
  bottom: 100px;
}

.lower ul {
  margin: 0;
  padding: 0;
}

.lower li {
  list-style: none;
}

.lower-comments {
  padding: 15px 0 15px 0;
  margin-bottom: 150px;
}

.lower-comments ul {
  width: 100%;
}

.lower-comments li {
  display: flex;

}

.player-container {
  width: 100%;
}

.player {
  aspect-ratio: 16/9;
  width: 80%;
  margin: 0 auto;
  box-shadow: 0px 0px 10px 1px rgb(225 225 225 / 80%);
}

.video-header {
  margin: 0 auto;
  padding: 40px 0 30px 0;
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
}

.video-info {
  width: 65%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

.video-info-title {
  font-size: 25px;
  overflow: hidden;
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: anywhere;
}

.video-info-detail {
  width: 100%;
  margin-top: 15px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.video-info-time {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 18px;
  margin-right: 20px;
}

.video-info-playcount {
  font-size: 18px;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.video-info-uper {
  width: 30%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.video-info-uper-img {
  aspect-ratio: 1/1;
  width: 70px;
  overflow: hidden;
  border-radius: 35px;
  margin-right: 20px;
}

.video-info-uper-img img {
  object-fit: cover;
  height: 100%;
  width: 100%;
}

.video-info-uper-name {
  font-size: 30px;
}

.lower {
  width: 80%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin: 0 auto;
  padding-top: 30px;
  user-select: none;
}

.lower-left {
  width: 65%;
}

.lower-more {
  width: 30%;
  margin: 5px 0 100px 0;
  background-color: #9AC8FF;
}

.video-change-ul::-webkit-scrollbar {
  width: 5px;
}

.video-change-ul::-webkit-scrollbar-button {
  opacity: 0.0;
}

.video-change-ul::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 0.0);
  border-radius: 3px;
}

.video-change-ul:hover::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 1.0);
}

.video-change {
  border-radius: 6px;
}

.video-change-ul {
  max-height: 200px;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  transition: all .3s ease;
}

.video-change-li {
  text-align: left;
  padding: 5px 10px 5px 10px;
  margin: 5px;
  height: 30px;
  min-height: 30px;
  max-height: 30px;
  width: 90%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  border-radius: 6px;
  border: 1px solid transparent;
  transition: all .3s ease;
  cursor: pointer;
}

.video-change-li span {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-change-li:hover {
  max-height: 200px;
  height: auto !important;
  white-space: unset;
  background: #fff;
}

.video-change-li:hover span {
  overflow: unset;
  text-overflow: unset;
  white-space: pre-wrap;
}

.lower-left-options {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 15px 0 15px 0;
}

.lower-left-summary {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  font-size: 20px;
  padding: 10px 0 10px 0;
}

.lower-left-summary-text {
  user-select: text;
  text-align: left;
  font-size: 17px;
  white-space: pre-wrap;
}

.lower-left-summary-text-container {
  overflow: hidden;
  height: 50px;
}

.lower-left-summary-more {
  font-size: 16px;
  transition: color .3s ease;
  user-select: none;
  cursor: pointer;
  margin-top: 10px;
  font-weight: bold;
}

.lower-left-summary-more:hover {
}

.lower-left-options-li {
  text-align: left;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-size: 24px;
  margin-right: 50px;
  transition: color .3s ease;
  cursor: pointer;
}

.lower-left-options-li svg {
  margin-right: 8px;
  transition: fill .3s ease;
}

.lower-left-options-li:hover {
}

.lower-left-options-li:hover svg {
}

.lower-comments-li {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  padding: 20px 0 15px 0;
}

.lower-comments-li-img-container {
  width: 70px;
  height: 70px;
  overflow: hidden;
  border-radius: 35px;
  margin-right: 20px;
}

.lower-comments-li-img-container img {
  object-fit: cover;
  width: 100%;
}

.lower-comments-li-header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
}

.lower-comments-li-header-name {
  text-align: left;
  font-size: 25px;
  user-select: text;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  word-wrap: anywhere;
}

.lower-comments-li-text {
  padding: 20px 0 0px 0;
  font-size: 20px;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
  width: 100%;
}

.lower-comments-li-text-main {
  text-align: left;
  user-select: text;
  color: #000;
}

.lower-comments-li-text-more {
  font-size: 16px;
  font-weight: bolder;
  margin: 10px 0 10px 10px;
  transition: color .3s ease;
  cursor: pointer;
  display: none;
}

.lower-comments-li-text-time {
  padding: 10px 0 0px 0;
}

.lower-comments-li-text-container {
  overflow: hidden;
  max-height: 55px;
}

.lower-comments-li-text-more:hover {
}

.lower-comments-li-reply {
  padding-left: 50px;
  width: 100%;
  box-sizing: border-box;
}

.lower-comments-li-reply-li {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  padding: 10px 0 10px 0;
}

.el-pager {
  width: unset !important;
}

.reply_btn {
  margin-left: 20px;
  color: #000;
  transition: color .3s ease;
  font-size: 16px;
  cursor: pointer;
}

.reply_btn:hover {
}

.reply-li {
  display: none !important;
}

.lower-reply-img-container {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  overflow: hidden;
  margin-right: 30px;
}

.lower-reply img {
  width: 100%;
  height: 100%;
}

.lower-reply {
  position: fixed;
  bottom: 0;
  left: 10%;
  width: 800px;
  min-width: 400px;
  padding: 10px 0 10px 0;
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
}

.lower-reply-input textarea {
  outline: none;
  width: 500px;
  height: 45px;
  font-family: inherit;
  line-height: 38px;
  color: #000;
  resize: none;
  transition: all .3s ease;
  font-size: 20px;
  line-height: 20px;
  padding: 10px;
}

.lower-reply-input textarea:focus {
  height: 120px;
}

.lower-reply-submit {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 45px;
  aspect-ratio: 16/9;
  border-radius: 6px;
  background-color: #9AC8FF;
  color: #260606;
  transition: background-color .3s ease;
  cursor: pointer;
  user-select: none;
}

.lower-reply-submit:hover {
  background-color: #ff9aee;
}

.fade-enter-active,
.fade-leave-active {
  transition: all .3s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0.0 !important;
}

.fade-enter-to,
.fade-leave-from {
  opacity: 1.0 !important;
}

.btn-active {
}

.dialog-footer button:first-child {
  margin-right: 10px;
}

.lower-switcher {
  display: none;
  font-size: 20px;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0px 15px 0;
  margin: 0 5px 0 5px;
}

.lower-switcher-active {
  font-weight: 700;
  color: #409eff;
}

.options-img-container {
  width: 50px;
  aspect-ratio: 1/1;
  margin-right: 10px;
  overflow: hidden;
  border-radius: 25px;
}

.options-img-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.options-info {
  display: none;
  justify-content: flex-start;
  align-items: center;
  font-size: 20px;
}

.el-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0 !important;
}

.dialog-collection-ul::-webkit-scrollbar {
  width: 5px;
}

.dialog-collection-ul::-webkit-scrollbar-button {
  opacity: 0.0;
}

.dialog-collection-ul::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 0.0);
  border-radius: 3px;
}

.dialog-collection-ul:hover::-webkit-scrollbar-thumb {
  background-color: rgb(139, 139, 139, 1.0);
}


.el-dialog__body {
  padding: 5px 20px 5px 20px !important;
}

.el-image {
  height: 70px;
  width: 70px;
  overflow: hidden;
  border-radius: 35px;
}

.progress-outer {
  width: 100%;
  height: 60px;
}

.progress-inner {
  width: 0%;
  height: 20px;
}

@media screen and (max-width:550px) {
  .lower-left-summary {
    font-size: 17px;
  }

  .lower-comments-li-text {
    font-size: 14px;
  }

  .video-header {
    width: 100%;
    padding: 40px 10px 30px 10px;
  }

  .video-info {
    width: 100%;
  }

  .player {
    width: 100%;
  }

  .video-info-uper {
    display: none;
  }

  .lower-comments-li {
    overflow: hidden;
  }

  .el-dialog {
    width: 80% !important;
  }

  .lower-reply {
    opacity: 1.0 !important;
    left: 0;
    width: 100vw;
  }

  .bottom_reply {
    display: flex !important;
  }

  .lower-reply-input textarea {
    width: 120px !important;
    font-size: 10px;
  }

  .lower {
    width: 100%;
    margin: 0;
    padding: 0 5px 0 5px;
    box-sizing: border-box;
  }

  .lower-reply textarea {
    width: 120px !important;
  }

  .lower-switcher {
    display: flex;
  }

  .lower-left {
    width: 100% !important;
  }

  .lower-more {
    width: 100% !important;
    display: none;
  }

  .reply-li {
    width: 100%;
  }

  .options-info {
    display: flex;
  }

  .lower-left-options-li {
    margin-right: 3px;
  }

  .el-message-box {
    width: 80% !important
  }

  .video-info-title {
    font-size: 18px !important;
  }

  .video-info-time {
    font-size: 15px !important;
  }

  .video-info-playcount {
    font-size: 15px !important;
  }
}
/*.dark {*/
/*  --w-e-textarea-bg-color: #2b2b2b;*/
/*  --w-e-textarea-color: #d3d3d3;*/
/*  !* ...其他... *!*/
/*}*/
</style>